<template>
  <!-- 监察端-项目人员列表 -->
  <div class="container" id="container" ref="mainCon">
    <div class="mainCon">
      <el-row class="searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="listForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="参建单位" class="row-padding-bottom">
              <el-select
                :disabled="isFB"
                v-model="filterField.projectCompanyId"
                filterable
                clearable
                placeholder="请选择"
                @change="handleChange"
              >
                <el-option
                  v-for="(item, index) of companyList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="所属班组" class="row-padding-bottom">
              <el-select
                v-model="filterField.groupId"
                filterable
                clearable
                placeholder="请先选择参建单位"
              >
                <el-option
                  v-for="(item, index) of groupIdOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="在职状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  clearable
                  placeholder="请选择"
                >
                  <el-option label="在职" value="ON_JOB"></el-option>
                  <el-option label="离职" value="DISMISSED"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="合同上传状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isFile"
                  clearable
                  placeholder="请选择"
                >
                  <el-option label="已上传" value="1"></el-option>
                  <el-option label="未上传" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="人员名称" class="row-padding-bottom">
                <el-input
                  placeholder="请输入姓名或身份证号码"
                  clearable
                  v-model.trim="filterField.keyword"
                  @blur="filterField.keyword = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="考勤卡号" class="row-padding-bottom">
                <el-input
                  placeholder="请输入考勤卡号"
                  clearable
                  v-model.trim="filterField.attNo"
                  @blur="filterField.attNo = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6" v-if="isKMUser()">
              <el-form-item label="户籍" class="row-padding-bottom">
                <el-cascader
                  ref="manageArea"
                  v-model="filterField.census"
                  :append-to-body="false"
                  :options="liveAddressOptions"
                  @change="getAreaId"
                  clearable
                  filterable
                  :props="{ checkStrictly: true, emitPath: false }"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="人像采集" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isFaceCollect"
                  clearable
                  placeholder="请选择"
                >
                  <el-option label="已采集" :value="'1'"></el-option>
                  <el-option label="未采集" :value="'0'"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="人员类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.type"
                  filterable
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="v in employeeTypeOptions"
                    :key="v.id"
                    :label="v.name"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="工种" class="row-padding-bottom">
                <el-select
                  v-model="filterField.workType"
                  filterable
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="v in workTypeOptions"
                    :key="v.id"
                    :label="v.name"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchTable"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <!-- <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                v-sdc
                @click="exportEmployeeList"
                v-if="isShowExprot&&loginType === 'JC'"
              >
                <span class="opetareText">导出花名册</span>
              </el-button> -->
            </el-form-item>
          </el-col>
          <!-- <el-form-item class="fl" v-if="isShowAdd||(isShowExprot&&(loginType!== 'JC'||accountType == 'PROJECT_ADMINISTRATOR'))">
          <el-button
            class="commonBut saveBtn funComBut addEmployee"
            icon="iconfont icontianjia"
            @click="addEmployee"
            v-if="isShowAdd"
            :disabled="disabled"
          >
            <span class="opetareText">{{($store.state.userType == "PROJECT_ADMINISTRATOR" || $store.state.userType == "LABOR_ADMINISTRATOR")?'添加工人':'添加员工'}}</span>
          </el-button>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            v-sdc
            @click="exportEmployeeList"
            v-if="isShowExprot&&loginType!== 'JC'"
          >
            <span class="opetareText">导出花名册</span>
          </el-button>
          <el-button
            class="commonBut saveBtn funComBut outEmployee"
            icon="icon iconfont icondaochu"
            v-sdc
            @click="outEmployeeMore"
            v-if="isShowExprot &&  accountType == 'PROJECT_ADMINISTRATOR'"
          >
            <span class="opetareText">批量离职</span>
          </el-button>
        </el-form-item> -->
        </el-form>
      </el-row>
      <!-- 列表 -->
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="isShowAdd || isShowExprot">
          <el-button
            class="commonBut saveBtn funComBut addEmployee"
            icon="iconfont icontianjia"
            @click="addEmployee"
            v-if="isShowAdd && showHistory"
            :disabled="disabled"
          >
            <span class="opetareText">{{
              $store.state.userType == 'PROJECT_ADMINISTRATOR' ||
              $store.state.userType == 'LABOR_ADMINISTRATOR'
                ? '添加工人'
                : '添加员工'
            }}</span>
          </el-button>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            v-sdc
            @click="exportEmployeeList"
            v-if="isShowExprot && loginType !== 'JC'"
          >
            <span class="opetareText">导出花名册</span>
          </el-button>
          <el-button
            class="commonBut saveBtn funComBut outEmployee"
            icon="icon iconfont icondaochu"
            v-sdc
            @click="outEmployeeMore"
            v-if="
              isShowExprot &&
              accountType == 'PROJECT_ADMINISTRATOR' &&
              showHistory
            "
          >
            <span class="opetareText">批量离职</span>
          </el-button>
          <el-link
            type="primary"
            v-if="showHistory"
            @click="goHistory"
            v-sdc
            class="fontBtn"
            style="margin-left: 10px"
            >历史记录</el-link
          >
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <el-table-column
            align="center"
            prop="idcardPhoto"
            label="身份证照片"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.idcardPhoto"
                style="width: 50px; height: 50px; top: 3.5px"
                :src="scope.row.idcardPhoto"
                :preview-src-list="scope.row.idcardImgList"
              ></el-image>
              <el-image
                v-else
                src="../../../static/img/employee/idcard.png"
                alt
                style="width: 50px; height: 50px; top: 3.5px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="姓名"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="idcard"
            label="身份证号"
            min-width="140"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.idcard | deseHandler(4, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="census"
            label="户籍"
            :formatter="formatTd"
            v-if="isKMUser()"
            min-width="160"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="attNo"
            label="考勤卡号"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="状态"
            :formatter="formatTd"
            min-width="110"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="groupName"
            label="所属班组"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="typeName"
            label="人员类型"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="workTypeName"
            label="工种"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="isFile"
            label="合同上传状态"
            :formatter="formatFile"
            min-width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="inputDate"
            label="录入时间"
            :formatter="formatTd"
            min-width="180"
            v-if="!isHsUser()"
            sortable="custom"
          >
            <!-- 恩施展示 yyyy-mm-dd  hh:mm:ss -->
            <!-- 其他区域展示 yyyy-mm-dd  -->
            <template slot-scope="scope">
              <span>{{
                isEnShi
                  ? scope.row.inputDate
                  : scope.row.inputDate.substring(0, 10)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="faceImg"
            label="体征信息"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.facePhoto"
                style="width: 50px; height: 50px"
                :src="scope.row.facePhoto"
                :preview-src-list="scope.row.faceImgList"
              ></el-image>
              <img
                v-else
                src="../../../static/img/employee/card.png"
                alt
                width="50px"
                height="50px"
                style="margin-left: 9px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="faceImg"
            label="采集照片"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.faceCameraPhoto"
                style="width: 50px; height: 50px"
                :src="scope.row.faceCameraPhoto"
                :preview-src-list="scope.row.faceCameraImgList"
              ></el-image>
              <img
                v-else
                src="../../../static/img/employee/card.png"
                alt
                width="50px"
                height="50px"
                style="margin-left: 9px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="account"
            label="工资卡号"
            :formatter="formatTd"
            min-width="120"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.account | deseHandler(4, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="tel"
            label="手机号"
            :formatter="formatTd"
            min-width="120"
            v-if="isCzUser()"
            :key="3"
          ></el-table-column>
          <el-table-column
            align="left"
            width="210px"
            fixed="right"
            label="操作"
          >
            <!-- <template slot-scope="scope" slot = "header">
            <div class = "aa">操作</div>
        </template> -->

            <template slot-scope="scope">
              <!-- <div v-if="loginType === 'monitor'">
                  <el-link type="primary" @click="seeDetail(scope.row.employeeId)">查看</el-link>
          </div>-->
              <!-- <div v-else> -->
              <div>
                <el-link
                  type="primary"
                  v-show="isShowDetail"
                  @click="seeDetail(scope.row.employeeId)"
                  >查看</el-link
                >
                <el-link
                  type="primary"
                  v-if="
                    scope.row.status === '在职' && isShowUpdate && showHistory
                  "
                  @click="setOutWork(scope.$index, scope.row)"
                  >设为离职</el-link
                >
                <el-link
                  type="primary"
                  v-if="
                    scope.row.status !== '在职' && isShowUpdate && showHistory
                  "
                  @click="setJobWork(scope.$index, scope.row)"
                  >设为在职</el-link
                >
                <el-link
                  type="primary"
                  @click="updateEvent(scope.$index, scope.row)"
                  v-if="isShowUpdate && showHistory"
                  >修改</el-link
                >
              </div>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isEmpty">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
    <!-- 设置在离职弹窗 -->
    <empOverDate ref="empOverDate" @refresh-data="searchTable"></empOverDate>
    <el-dialog
      title="批量离职"
      :visible.sync="showOutMore"
      width="900px"
      :modal-append-to-body="false"
      class="outMoreDia"
      :append-to-body="true"
    >
      <p class="warningInfo">
        <i class="el-icon-warning warningIcon"></i>
        <span class="warningText"
          >选择离职人员,确认离职人员清单，点击确定即可批量离职</span
        >
      </p>
      <el-form
        :model="formData"
        label-width="120px"
        :rules="formRules"
        ref="formData"
        style="padding: 16px 24px"
        class="form"
      >
        <el-form-item label prop="department" class="el-form-department">
          <el-row class="custom-tree-container clearfix">
            <!-- 树形结构部分 -->
            <el-col class="treeStyle">
              <h3>
                当前在职人员（{{ treeTotal - toOutEmployeeShow.length }}人）
              </h3>
              <el-tree
                class="treeStyleList"
                :data="getTreeData"
                node-key="id"
                default-expand-all
                show-checkbox
                @check-change="handleCheckChange"
                :render-content="renderTree"
              ></el-tree>
              <!-- <span>请选择批量离职人员</span> -->
              <!-- :expand-on-click-node="false" -->
              <!-- @node-click="adjust" -->
            </el-col>
            <!-- 树形结构部分 -->
            <el-col class="transferButtons">
              <!-- <div @click="choseTree" class = "choseTreeBut">选择</div>
                <svg t="1604557245055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2878" width="48" height="48"><path d="M959.9 371.1v-0.1c-0.1-0.7-0.2-1.3-0.3-2v-0.1c-0.1-0.7-0.3-1.3-0.5-1.9v-0.2l-0.6-1.8c0-0.1-0.1-0.1-0.1-0.2-0.2-0.6-0.5-1.2-0.8-1.7 0-0.1-0.1-0.2-0.1-0.2-0.3-0.6-0.6-1.1-1-1.6 0-0.1-0.1-0.2-0.1-0.2-0.4-0.6-0.8-1.1-1.2-1.6l-0.1-0.1c-0.5-0.6-1-1.1-1.5-1.6L758.4 162.4c-8.6-8.6-22.5-8.6-31.1 0-8.6 8.6-8.6 22.5 0 31.1l157.6 157.6H86c-12.2 0-22 9.8-22 22s9.8 22 22 22h852c0.7 0 1.4 0 2-0.1h0.1c0.7-0.1 1.3-0.2 2-0.3h0.1c0.7-0.1 1.3-0.3 1.9-0.5h0.2l1.8-0.6c0.1 0 0.1-0.1 0.2-0.1 0.6-0.2 1.2-0.5 1.7-0.8 0.1 0 0.2-0.1 0.2-0.1 0.6-0.3 1.1-0.6 1.6-1 0.1 0 0.2-0.1 0.2-0.1 0.6-0.4 1.1-0.8 1.6-1.2l0.1-0.1c1.1-0.9 2.2-2 3.1-3.1l0.1-0.1c0.4-0.5 0.8-1 1.2-1.6 0.1-0.1 0.1-0.2 0.1-0.2 0.3-0.5 0.7-1.1 1-1.6 0-0.1 0.1-0.2 0.1-0.2 0.3-0.6 0.6-1.1 0.8-1.7 0-0.1 0.1-0.1 0.1-0.2 0.2-0.6 0.5-1.2 0.6-1.8v-0.2c0.2-0.6 0.3-1.3 0.5-1.9v-0.1c0.1-0.6 0.2-1.3 0.3-2v-0.1c0.1-0.7 0.1-1.3 0.1-2 0.3-0.9 0.3-1.6 0.2-2.3zM938 629.6H86c-0.7 0-1.4 0-2 0.1h-0.1c-0.7 0.1-1.3 0.2-2 0.3h-0.1c-0.7 0.1-1.3 0.3-1.9 0.5h-0.2l-1.8 0.6c-0.1 0-0.1 0.1-0.2 0.1-0.6 0.2-1.2 0.5-1.7 0.8-0.1 0-0.2 0.1-0.2 0.1-0.6 0.3-1.1 0.6-1.6 1-0.1 0-0.2 0.1-0.2 0.1-0.6 0.4-1.1 0.8-1.6 1.2l-0.1 0.1c-1.1 0.9-2.2 2-3.1 3.1l-0.1 0.1c-0.4 0.5-0.8 1-1.2 1.6-0.1 0.1-0.1 0.2-0.1 0.2-0.3 0.5-0.7 1.1-1 1.6 0 0.1-0.1 0.2-0.1 0.2-0.3 0.6-0.6 1.1-0.8 1.7 0 0.1-0.1 0.1-0.1 0.2-0.2 0.6-0.5 1.2-0.6 1.8v0.2c-0.2 0.6-0.3 1.3-0.5 1.9v0.1c-0.1 0.6-0.2 1.3-0.3 2v0.1c-0.1 0.7-0.1 1.3-0.1 2s0 1.4 0.1 2v0.1c0.1 0.7 0.2 1.3 0.3 2v0.1c0.1 0.7 0.3 1.3 0.5 1.9v0.2l0.6 1.8c0 0.1 0.1 0.1 0.1 0.2 0.2 0.6 0.5 1.2 0.8 1.7 0 0.1 0.1 0.2 0.1 0.2 0.3 0.6 0.6 1.1 1 1.6 0 0.1 0.1 0.2 0.1 0.2 0.4 0.6 0.8 1.1 1.2 1.6l0.1 0.1c0.5 0.6 1 1.1 1.5 1.6l195.2 195.2c8.6 8.6 22.5 8.6 31.1 0 8.6-8.6 8.6-22.5 0-31.1L139.1 673.6H938c12.2 0 22-9.8 22-22s-9.8-22-22-22z" p-id="2879" fill="#8a8a8a"></path></svg>
                <div @click="cancelTree" class = "choseTreeBut">取消</div> -->
              <div class="btnBox">
                <button
                  type="button"
                  @click="choseTree"
                  :class="
                    transferRightDisabled
                      ? 'el-button el-button--primary is-disabled el-transfer__button'
                      : 'el-button el-button--primary el-transfer__button'
                  "
                  :disabled="transferRightDisabled"
                >
                  <span><i class="el-icon-arrow-right"></i></span>
                </button>
                <button
                  type="button"
                  @click="cancelTree"
                  style="margin-left: 0"
                  :class="
                    transferLeftDisabled
                      ? 'el-button el-button--primary is-disabled el-transfer__button'
                      : 'el-button el-button--primary el-transfer__button'
                  "
                  :disabled="transferLeftDisabled"
                >
                  <span><i class="el-icon-arrow-left"></i></span>
                </button>
              </div>
            </el-col>
            <el-col class="treeStyle">
              <h3>批量离职人员(已选{{ toOutEmployee.length }}人)</h3>
              <div class="treeStyleList checkresult">
                <el-checkbox-group
                  v-model="checkList"
                  @change="changeCheckList"
                >
                  <el-checkbox
                    v-for="v in toOutEmployeeShow"
                    :label="v.id"
                    :key="v.id"
                    name="type"
                    >{{ v.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <!-- <ul class="selectDepart treeStyleList" id="choiceNameBox">
                <li v-for="(item,index) in toOutEmployeeShow" :key="index" class="selectDepartList" @click="deleteOutEmp(index,item.id)">
                  {{item.label}}
                </li>
              </ul> -->
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="离职时间：" prop="outDate">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="formData.outDate"
            value-format="yyyy-MM-dd"
            class="form-item dialogSingleHalfInp"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="离职原因：" prop="reason">
          <el-input
            type="textarea"
            rows="3"
            placeholder="请输入离职原因"
            v-model.trim="formData.reason"
            class="form-item dialoglargeInp"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelOutMore" class="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="submitlOutMore"
          :loading="isOutLoading"
          class="save"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 根据字段选中导出报表 -->
    <employeeExportExcel
      @getExportList="getExportList"
      v-if="isShowDialog"
      :dialogFormVisible="isShowExcel"
      @closeDialog="hiddenDialog"
    ></employeeExportExcel>
  </div>
</template>

<script>
// import scrollTable from '@/mixin/scrollTable.js';
import empOverDate from '@/components/employee/empOverDate'
import common from '../../kits/common'
//引导页插件
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from '../../kits/employStep'
import { mapState, mapActions } from 'vuex'
import employeeExportExcel from '@/components/employee/employeeExportExcel'

export default {
  name: 'projectEmployeeList',
  //   mixins:[scrollTable],
  components: {
    empOverDate,
    employeeExportExcel,
  },
  // props: ['projectId', 'projectName','currentPage','fromType'],
  props: {
    projectId: {
      type: String,
      default: '',
    },
    projectName: {
      type: String,
      default: '',
    },
    currentPage: {
      type: String,
      default: '',
    },
    fromType: {
      type: String,
      default: '',
    },
    isFB: {
      type: Boolean,
      default: false,
    },
    showHistory: {
      type: Boolean,
      default: true,
    },
    oldUrl: {
      type: String,
      default: '',
    },
    backPath: {
      type: String,
      default: '',
    },
  },
  data() {
    var checkDepartment = (rule, value, callback) => {
      let that = this
      this.$nextTick(function () {
        if (that.toOutEmployeeShow.length < 1) {
          return callback(new Error('请选择批量离职人员'))
        } else {
          callback()
        }
      })
    }

    return {
      checkList: [], //已选择离职人员列表
      transferRightDisabled: true, //是否禁用往右穿梭按钮
      transferLeftDisabled: true, //是否禁用往左穿梭按钮
      hiddleToolBar: false,
      tableHeight: null,
      loginType: '',
      advanced: false,
      companyList: [],
      employeeTypeOptions: [], //人员类型下拉
      workTypeOptions: [], //工种下拉
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        projectId: '',
        uscc: '',
        projectCompanyId: '',
        groupId: '',
        status: '', //员工在离职状态（在职ON_JOB 、离职DISMISSED）
        keyword: '',
        isFile: '',
        attNo: '', //恩施新增卡号
        census: '',
        isFaceCollect: '', //是否采集人像
        type: '', //人员类型
        workType: '', //工种
      },
      pageSize: 20,
      pageNo: 1,
      tableData: [],
      loading: true,
      isEmpty: false,
      requestUrl: 'api-e/cs/employee/expand/projectemp',
      idcardImgList: [],
      faceImgList: [],
      faceCameraImgList: [],
      exportBtn: true,
      isShowUpdate: '',
      isShowAdd: '',
      isShowExprot: '',
      isEnShi: false,
      isShowDetail: '',

      showOutMore: false,
      isOutLoading: false,
      formData: {
        outDate: '',
        reason: '',
      },
      formRules: {
        outDate: [
          {
            required: true,
            message: '请选择离职日期',
            trigger: 'blur',
          },
        ],
        department: [
          {
            required: true,
            validator: checkDepartment,
            trigger: 'click',
          },
        ],
      },
      getTreeData: [],
      oldTreeData: [],
      toOutEmployee: [],
      toOutEmployeeShow: [],
      treeTotal: 0,
      pickerOptions: this.processDate(),
      driver: null,
      disabled: false,
      userType: '', //用户类型
      treeClickCount: 0,
      treeDeleteCount: 0,
      isShowDialog: false,
      isShowExcel: false,
      accountType: '',
    }
  },
  async created() {
    this.employeeTypeOptions = await this.getTypeOptions('EMPLOYEE_TYPE')
    this.workTypeOptions = await this.getTypeOptions('WORKER_TYPE')
    this.$store.commit('SET_INFO', ['groupIdOptions', []])
    this.userType = this.$store.state.userType
    // 从企业首页跳过来 isConfirmed "0" 为0展示未签订合同人员
    if (this.$route.query.type == 'constructCompanyHome') {
      this.filterField.isConfirmed = '0'
    }
    //获取用户类型
    // this.loginType = localStorage.getItem('loginType') === "QY" ? 'company' : 'monitor' ;
    this.loginType = localStorage.getItem('loginType')
    this.filterField.projectId = this.projectId
    this.accountType = this.$store.state.accountType
    //获取参建单位
    this.getCompanyList()

    //获取页面传值
    if (this.$route.query.groupId || this.$route.query.uscc) {
      this.filterField.uscc = this.$route.query.uscc
        ? this.$route.query.uscc
        : ''
      this.getGroupList({
        projectId: this.filterField.projectId,
        uscc: this.filterField.uscc,
      })
      this.filterField.groupId = this.$route.query.groupId
        ? this.$route.query.groupId
        : ''
      this.filterField.status = this.$route.query.isOnTheJob
        ? this.$route.query.isOnTheJob
        : ''
    }
    this.pageNo = this.currentPage || 1
    this.$store.commit('SET_INFO', ['pageNo', this.pageNo || 1])
    if (!this.isFB) {
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      })
    }

    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('csRosterFb:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRoster:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterSGF:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterJSF:update') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('csRosterFb:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRoster:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterSGF:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterJSF:add') > -1
    this.isShowExprot =
      this.$store.state.buttonLimitsArr.indexOf('csRosterFb:export') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRoster:export') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListSGF:export') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectList:export') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('mProjectList:export') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterSGF:export') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterJSF:export') > -1
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('csRosterFb:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRoster:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('mProjectList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csRosterJSF:detail') > -1
    // 项目看板，默认显示在职
    if (this.fromType == 'projectDetail') {
      this.filterField.status = 'ON_JOB'
    }
    if (
      this.fromType == 'projectDetail' &&
      this.$route.query.isOnTheJob == ''
    ) {
      this.filterField.status = ''
    }
  },
  computed: {
    ...mapState(['groupIdOptions', 'liveAddressOptions']),
    smallDate() {
      let arr = this.toOutEmployee
      if (arr.length) {
        let sum = 0
        arr.forEach((item) => {
          if (new Date(item.remark).getTime() > sum) {
            sum = new Date(item.remark).getTime()
          }
        })
        return sum
      } else {
        return null
      }
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.isEnShi = this.isEsUser()
    // return;
    if (localStorage.getItem('loginType') != 'JC') {
      this.$nextTick(() => {
        var that = this
        that.driver = new Driver({
          //className: "el-main", // className to wrap driver.js popover
          animate: true, // Animate while changing highlighted element
          opacity: 0.7, // Background opacity (0 means only popovers and without overlay)
          padding: 0, // Distance of element from around the edges
          allowClose: false, // Whether clicking on overlay should close or not
          overlayClickNext: false, // Should it move to next step on overlay click
          doneBtnText: '关闭指引', // Text on the final button
          closeBtnText: '', // Text on the close button for this step
          nextBtnText: '下一步', // Next button text for this step
          prevBtnText: '上一步', // Previous button text for this step
          onHighlighted: (Element) => {
            that.disabled = true
          },
          onReset: (Element) => {
            that.disabled = false
            //清空禁用
            that.$emit('func', that.disabled)
            localStorage.setItem('isFirstUseEmployee', false)
          },
        })
        if (localStorage.getItem('isFirstUseEmployee') != 'false') {
          this.$nextTick(() => {
            this.driver.defineSteps(steps)
            this.driver.start()
          })
        }
      })

      let that = this
      this.$nextTick(function () {
        let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
        let tableTop = this.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          this.tableHeight =
            this.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }

        window.onresize = function () {
          if (!that.$refs.tableBox1) {
            return
          }
          let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
          let tableTop = that.$refs.tableBox.getBoundingClientRect().top
          if (tableHeightCur + tableTop > window.innerHeight) {
            that.tableHeight =
              that.$refs.mainCon.getBoundingClientRect().height - 86
          } else {
            document.getElementsByClassName('tableBoxCur').length &&
              (document.getElementsByClassName('tableBoxCur')[0].style.height =
                window.innerHeight - tableTop - 40 + 'px')
          }
        }
      })
    }
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    if (!this.isFB) {
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      })
    }
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    goHistory() {
      const path = '/home/smallProjectManage/attachRecordPage'
      this.$router.push({
        path,
        query: {
          oldUrl: this.oldUrl,
          backPath: this.backPath,
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: this.oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 左边穿梭tree选择
    handleCheckChange(curNode, checked) {
      curNode.checked = checked //复选选中状态
      let sum = 0
      const showTransferRight = (arr) => {
        arr.forEach((v) => {
          if (v.children) {
            if (v.children.length > 0) {
              showTransferRight(v.children)
            }
          } else {
            sum += v.checked ? 1 : 0
          }
        })
      }
      // 递归计算左边选中个数
      showTransferRight(this.getTreeData)
      sum > 0
        ? (this.transferRightDisabled = false)
        : (this.transferRightDisabled = true)
    },
    // 右边穿梭复选
    changeCheckList() {
      this.checkList.length > 0
        ? (this.transferLeftDisabled = false)
        : (this.transferLeftDisabled = true)
    },
    getTypeOptions(type) {
      return this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/typeorname',
        data: { dicitemType: type },
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = e.target.scrollTop
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          this.tableHeight = window.innerHeight - 240
          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    ...mapActions(['getGroupList', 'getLiveAddressList']),
    // 确认选中往右穿梭
    choseTree() {
      this.transferRightDisabled = true
      this.cutEmployee()
    },
    // 确认选中往左穿梭
    cancelTree() {
      this.transferLeftDisabled = true
      // 右边未选中数组
      const arr = this.toOutEmployeeShow.filter((v) => {
        if (!this.checkList.includes(v.id)) return v
      })
      this.checkList = []
      this.toOutEmployeeShow = JSON.parse(JSON.stringify(arr))
      const oldArr = JSON.parse(JSON.stringify(this.oldTreeData))
      const spliceOne = (arr, id) => {
        arr.forEach((v, i) => {
          if (v.children) {
            spliceOne(v.children, id)
          } else {
            if (v.id === id) {
              arr.splice(i, 1)
            }
          }
        })
      }
      // 右边选中往左，即原始数据递归删掉右边未选中数据
      arr.forEach((v) => {
        spliceOne(oldArr, v.id)
      })
      const disabledArr = (arr) => {
        arr.forEach((v) => {
          if (v.children) {
            if (v.children.length > 0) {
              disabledArr(v.children)
            } else {
              v.disabled = true
            }
          }
        })
      }
      // 重置左边选中与禁用状态
      disabledArr(oldArr)
      this.getTreeData = JSON.parse(JSON.stringify(oldArr))
    },
    cutEmployee() {
      const flatArr = (arr) => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].children) {
            flatArr(arr[i].children)
          } else {
            if (arr[i].checked) {
              this.toOutEmployeeShow = [
                ...this.toOutEmployeeShow,
                ...arr.splice(i, 1),
              ]
              i--
            }
          }
        }
      }
      // 左边选中往右，即递归删除左边选中数据，并拼接右边数据
      flatArr(this.getTreeData)
      const disabledArr = (arr) => {
        arr.forEach((v) => {
          if (v.children) {
            if (v.children.length > 0) {
              disabledArr(v.children)
            } else {
              v.disabled = true
            }
          }
        })
      }
      // 重置左边选中与禁用状态
      disabledArr(this.getTreeData)
      this.getTreeData = JSON.parse(JSON.stringify(this.getTreeData))
    },
    processDate() {
      let that = this
      return {
        disabledDate(time) {
          if (that.smallDate) {
            return time.getTime() < that.smallDate
          } else {
            return
          }
        },
      }
    },

    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    /**
     * @description: 合同上传状态
     */
    formatFile(row, column) {
      switch (row.isFile) {
        case 1:
          return '已上传'
          break
        case 0:
          return '未上传'
          break
        default:
          return '未知'
      }
    },
    //加载列表
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isEmpty = true
      } else {
        this.isEmpty = false
        this.idcardImgList = []
        this.faceImgList = []
        this.faceCameraImgList = []
        for (var i = 0; i < this.tableData.length; i++) {
          this.idcardImgList.push(this.tableData[i].idcardPhoto)
          // 人脸采集
          this.faceCameraImgList.push(this.tableData[i].faceCameraPhoto)
        }

        for (var i = 0; i < this.tableData.length; i++) {
          this.faceImgList.push(this.tableData[i].facePhoto)
        }
        for (var i = 0; i < this.tableData.length; i++) {
          var container = this.idcardImgList
          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, this.tableData.length)
          var list = behindArr.concat(frontArr)
          this.tableData[i].idcardImgList = list
        }
        for (var i = 0; i < this.tableData.length; i++) {
          var container = this.faceImgList
          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, this.tableData.length)
          var list = behindArr.concat(frontArr)
          this.tableData[i].faceImgList = list
          // 人脸采集
          var collectBox = this.faceCameraImgList
          var collectArr = collectBox.slice(0, i)
          var cArr = collectBox.slice(i, this.tableData.length)
          var collectList = cArr.concat(collectArr)
          this.tableData[i].faceCameraImgList = collectList
        }
      }
    },
    // getPageNo(val){
    //   this.currentPage = val;
    //   this.$store.commit("setpageNo",val);
    // },
    //列表查询
    searchTable() {
      this.pageSize = 20
      this.pageNo = 1
      this.filterField.projectId = this.projectId
      this.$refs.pagination.getTableListData()
    },
    //参建单位
    getCompanyList() {
      // var reg= /^[A-Za-z0-9]+$/;
      // if(reg.test(this.filterField.uscc)){
      //     this.filterField.uscc = '';
      // };
      this.axios({
        method: 'post',
        // url: "api-p/projectcompany/expand/findbyprojectid",
        // url:"api-c/projectcompany/expand/getprojectcompany",
        url: 'api-p/projectcompany/expand/findprojectcompany',
        data: {
          projectId: this.filterField.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.companyList = res.data.result
              if (this.isFB) {
                this.filterField.uscc = res.data.result[0].uscc
                this.filterField.projectCompanyId = res.data.result[0].code
                this.$refs.pagination.getTableListData(this.currentPage)
                this.getGroupList({
                  projectId: this.filterField.projectId,
                  uscc: this.filterField.uscc,
                  projectCompanyId: this.filterField.projectCompanyId,
                })
              }
            } else {
              this.$message.error('参建单位数据获取失败')
            }
          },
          (res) => {
            this.$message.error('参建单位数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('参建单位数据获取失败')
        })
    },
    handleChange() {
      this.filterField.groupId = ''
      this.$store.commit('SET_INFO', ['groupIdOptions', []])
      var projectCompanyId = this.filterField.projectCompanyId
      if (projectCompanyId) {
        const findOne = this.companyList.find(
          (v) => v.code === projectCompanyId
        )
        this.filterField.uscc = findOne.uscc
        this.getGroupList({
          projectId: this.filterField.projectId,
          uscc: this.filterField.uscc,
          projectCompanyId,
        })
      } else {
        this.filterField.uscc = ''
      }
    },
    //查看详情
    seeDetail(employeeId) {
      if (this.isFB) {
        this.$router.push({
          path: '/home/employee/employeeInfoC',
          name: 'employeeInfoC',
          query: {
            employeeId: employeeId,
            projectId: this.filterField.projectId,
            path: 'projectEmployeeList',
            isFB: true,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeFb',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          path: '/home/employee/employeeInfoC',
          name: 'employeeInfoC',
          query: {
            employeeId: employeeId,
            projectId: this.filterField.projectId,
            path: 'projectEmployeeList',
          },
        })
        //（建筑端）企业端/项目端的项目花名册-查看详情
        if (this.loginType === 'QY' || this.loginType === 'XM') {
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/employee/projectEmployeeQY',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/employee/employeeTotalListJC',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      }
    },
    //导出列表 (企业功能)
    exportEmployeeList() {
      this.searchTable()
      setTimeout(() => {
        if (this.tableData.length) {
          this.isShowDialog = true
          this.isShowExcel = true
        } else {
          this.$message.warning('暂未数据导出')
        }
      }, 400)
    },
    //添加人员(企业功能)
    addEmployee() {
      if (this.isFB) {
        this.$router.push({
          name: 'employeeAddJz',
          path: '/home/employee/employeeAddJz',
          query: {
            path: 'projectEmployeeQY',
            projectId: this.projectId,
            projectName: this.projectName,
            isFB: true,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeFb',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          name: 'employeeAddJz',
          path: '/home/employee/employeeAddJz',
          query: {
            path: 'projectEmployeeQY',
            projectId: this.projectId,
            projectName: this.projectName,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 设为离职
    setOutWork(index, row) {
      this.$refs.empOverDate.setOutWork(index, row)
    },
    //设为在职
    setJobWork(index, row) {
      this.$refs.empOverDate.setJobWork(index, row)
    },
    //修改
    updateEvent(index, row) {
      this.employeeId = row.employeeId
      this.contractId = row.id
      if (this.isFB) {
        this.$router.push({
          path: '/home/employee/employeeEditJz/',
          name: 'employeeEditJz',
          query: {
            employeeId: this.employeeId,
            contractId: this.contractId,
            projectId: this.projectId,
            projectName: this.projectName,
            isFB: true,
            currentPage: this.pageNo,
            status: row.status,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeFb',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          path: '/home/employee/employeeEditJz/',
          name: 'employeeEditJz',
          query: {
            employeeId: this.employeeId,
            contractId: this.contractId,
            projectId: this.projectId,
            projectName: this.projectName,
            currentPage: this.pageNo,
            status: row.status,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    /**
     * @name: 点击批量离职按钮
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    outEmployeeMore() {
      this.toOutEmployee = []
      this.toOutEmployeeShow = []
      this.formData = {
        outDate: '',
        reason: '',
      }
      this.getEmployeeList()
    },
    /**
     * @name: 获取在职员工列表
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    getEmployeeList() {
      this.axios
        .post('api-e/cs/employee/expand/projecEmployeeList', {
          projectId: this.projectId,
          status: 'ON_JOB',
        })
        .then((res) => {
          if (!res.hasError) {
            this.getTreeData = res.data.result
            if (this.getTreeData) {
              if (this.getTreeData.length > 0) {
                // tree最外层复选禁用
                this.getTreeData = this.getTreeData.map((v) => {
                  v.disabled = true
                  return v
                })
                // 保存原始数据
                this.oldTreeData = JSON.parse(JSON.stringify(this.getTreeData))
              }
              this.treeTotal = res.data.msg
              if (this.treeTotal) {
                this.showOutMore = true
              } else {
                this.showOutMore = false
                this.$message({
                  type: 'warning',
                  message: '当前没有在职员工',
                })
              }
            } else {
              this.showOutMore = false
              this.$message({
                type: 'warning',
                message: '当前没有在职员工',
              })
            }
          }
        })
    },
    cancelOutMore() {
      this.isOutLoading = false
      this.showOutMore = false
    },
    submitlOutMore() {
      //   this.isOutLoading = true;
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isOutLoading = true
          this.$confirm(
            '确认后选择的人员将批量离职，请谨慎操作，离职人员支持再次在职。是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
              this.sureOut()
            })
            .catch(() => {
              this.isOutLoading = false
              this.$message({
                type: 'info',
                message: '取消离职',
              })
            })
        }
      })
    },
    sureOut() {
      let arr = []
      this.toOutEmployeeShow.forEach((item) => {
        arr.push(item.type)
      })
      this.axios
        .post('api-e/nc/contract/expand/betchDismiss', {
          contractIds: JSON.stringify(arr),
          overDate: this.formData.outDate,
          overReason: this.formData.reason,
        })
        .then((res) => {
          if (res && !res.data.hasError) {
            if (!res.data.result) {
              this.$message({
                type: 'success',
                message: '批量离职成功',
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.data.result,
              })
            }
            this.isOutLoading = false
            this.showOutMore = false
            setTimeout(() => {
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            }, 1500)
          } else {
            this.$message({
              type: 'error',
              message: '设置失败',
            })
          }
        })
    },
    renderTree(h, { node, data, store }) {
      return (
        <span class="employee-tree-node">
          <span>{data.label}</span>
        </span>
      )
    },
    //隐藏导出弹框
    hiddenDialog(val) {
      this.isShowDialog = false
      this.isShowExcel = false
    },
    getExportList(val) {
      this.isShowDialog = false
      this.isShowExcel = false
      //过滤父级,父级无字段，不传给后台
      var arr = ['one', 'two', 'three']
      for (let v of arr) {
        val = val.filter((item) => item !== v)
      }
      var valLater = encodeURIComponent(this.packageParams(val))
      //   let downloadApi = ""
      //   if(this.isFB){
      //        downloadApi = "api-e/cs/employee/expand/exportemp?projectId="
      //   }else{
      //       downloadApi = "api-e/cs/employee/expand/dynamicExport?projectId="
      //   }
      const {
        projectId,
        uscc,
        groupId,
        status,
        keyword,
        isFile,
        attNo,
        census,
        isFaceCollect,
        type,
        workType,
        sortField,
        sort,
      } = this.filterField
      let downloadApi = 'api-e/cs/employee/expand/dynamicExport?projectId='
      if (val.length) {
        window.location.href =
          common.commonApi +
          downloadApi +
          projectId +
          '&uscc=' +
          uscc +
          '&groupId=' +
          groupId +
          '&status=' +
          status +
          '&keyword=' +
          keyword +
          '&isFile=' +
          isFile +
          '&attNo=' +
          attNo +
          '&census=' +
          census +
          '&isFaceCollect=' +
          isFaceCollect +
          '&type=' +
          type +
          '&workType=' +
          workType +
          '&sortField=' +
          sortField +
          '&sort=' +
          sort +
          '&access_token=' +
          localStorage.getItem('access_token') +
          '&headeLists=' +
          valLater

        this.$alert('报表生成中，请稍等', '温馨提示', {
          confirmButtonText: '确定',
          callback: (action) => {},
        })
      } else {
        this.$message({
          type: 'warning',
          message: '导出字段为空',
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.treeStyleCenter {
  padding-top: 120px;
  div {
    text-align: center;
  }
  .icon {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
  }
}
.fl {
  //    display: block;
  display: inline-block;
  //    float: left;
  float: none;
  margin-left: 24px;
}
.container {
  //引导页添加禁用样式
  .addEmployee.el-button.is-disabled {
    color: #fff;
    background-color: #009588;
    border-color: #009588;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/.el-form-item__label {
    width: 82px;
  }
}
.outEmployee {
  background-color: #3e5265;
  border-color: #3e5265;
  &:hover {
    background-color: #3e5265;
    border-color: #3e5265;
    opacity: 0.8;
  }
}
.outMoreDia {
  .el-form {
    margin-top: 0px;
  }
  /deep/ .el-dialog__body {
    padding: 0 !important;
  }
}

/deep/ .el-form-department .el-form-item__content {
  margin-left: 0 !important;
  .treeStyle {
    width: calc((100% - 122px) / 2);
    height: 295px;
    h3 {
      text-align: center;
      font-size: 16px;
      color: #303133;
      font-weight: 400;
    }
    .treeStyleList {
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 10px;
      height: calc(100% - 36px);
      overflow-y: auto;
    }
    .selectDepartList {
      cursor: pointer;
      padding-left: 25px;
      position: relative;
      span {
        position: absolute;
        right: 20px;
        color: #009588;
        cursor: pointer;
      }
    }
    .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
      background-color: #f2f6fc !important;
      border-color: #dcdfe6 !important;
    }
    .checkresult {
      padding: 10px 20px;
      /deep/ .el-checkbox {
        display: block !important;
      }
    }
  }
  .transferButtons {
    width: 122px;
    height: 295px;
    position: relative;
    .btnBox {
      padding: 0 30px;
      text-align: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.choseTreeBut {
  cursor: pointer;
}

.choseTreeBut:active,
.choseTreeBut:hover {
  color: #009588;
  font-weight: 700;
}
@import '../../../static/css/filterArea.less';
.warningInfo {
  background: #fffbe6;
  height: 36px;
  padding-left: 46px;
  position: relative;
  .warningIcon {
    color: orange;
    font-size: 20px;
    position: absolute;
    top: 8px;
    left: 20px;
  }
  .warningText {
    font-family: 'SourceHanSansCN-Regular';
    font-size: 14px;
    color: #ff4d4a;
    line-height: 36px;
  }
}
</style>
